<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link rel="stylesheet" href="../../static/assets/css/zpui.css" />
    <link rel="stylesheet" href="../../static/assets/css/all.css" />
    <script src="../../static/assets/js/page.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

    <title> 绑定手机号 </title>
</head>

<body>
    <div class="page">
        <div class="page-hd">
            <div class="header bor-1px-b">
                <div class="header-left">
                    <a href="javascript:history.go(-1)" class="left-arrow"></a>
                </div>
                <div class="header-title">绑定手机号</div>
                <div class="header-right">
                    <a href="#"></a>
                </div>
            </div>
        </div>

        <div class="page-bd" style="background-color: #ffffff;">
            <!-- 页面内容-->
            <div class="fs26" style="display: none; background-color: #faa89a;padding: 0.15rem 0.25rem;">已绑定手机：<span id="bindMobile"></span></div>
            <div class="tx_input" style="margin: 0.3rem 0.4rem">
                <input class="weui-input" style="width: 100%;padding-right: 0.3rem;" id="phone" name="phone" maxlength="11" type="text" placeholder="请输入手机号">
            </div>
            <div class="codebox">
                <div class="tx_input">
                    <input class="weui-input" style="width: 100%;padding-right: 0.2rem;" id="code" maxlength="6" name="code" type="code" placeholder="请输入验证码">
                </div>
                <button onclick="getcode(this)">获取验证码</button>
            </div>

            <div class="weui-btn-area" style="margin: 0.4rem">
                <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="checkMobileCode()">确定</a>
            </div>
        </div>
    </div>

    <script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
    <script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/assets/js/lib/fastclick.js"></script>
    <script>
        $(function() {
            FastClick.attach(document.body);
            checkBindMobile()

        });
        
              share()
     function  share(){
    /***用户点击分享到微信圈后加载接口接口*******/
        var url=window.location.href;
        console.log("url:"+url);
            $.ajax({
		    url: "/api/mp/wxconfig",
		    type: "post",
		    data:{shareUrl:url},
		    headers:{ token: $.cookie('code')},
		    dataType: "json",
		    success: function(data){
		         configData = {
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.data.appid, // 必填，公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                    signature: data.data.signature,// 必填，签名，见附录1
                    jsApiList : ['hideOptionMenu']
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
               };
               
               //step2:注入配置信息
               wx.config(configData);
               //step3:通过ready接口处理成功验证
               wx.ready(function () {
                   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//                 alert("执行ready方法");
//                 wx.checkJsApi({
//                      jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                      success: function(res) {
//                      // 以键值对的形式返回，可用的api值true，不可用为false
//                      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                      }
//                 });
                   //接口1:获取网络类型
                    wx.getNetworkType({
                        success: function (res) {
                          oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
//                        alert("网络类型"+ oldNet);
                        }
                     });
                   //禁用右上角菜单按钮
                   wx.hideOptionMenu();
		    })
		    },
		    error: function() {
// 			    _alert('ajax request failed!!!!');
			    return;
		    } 
        })

	    
	    
	    }
    </script>
    <script>
        var count = 120;
        var num = 0;
        var userphone =''
        //获取是否已绑定手机号码
        function checkBindMobile(){
            $.ajax({
                type: "GET",
                url: "https://mp.jianguoes.com/api/mp/getUserInfo",
                 headers:{ token: $.cookie('code')},
                success: function(data) {
                    if (data.errno == 0) {
                        if(!data.mobile){
                            $('.fs26').show()
                            $('#bindMobile').text(data.data.mobile)
                            userphone= data.data.mobile
                        }
                    }
                },
                error: function() {
                },
            })
        }
        //验证验证码
        function checkMobileCode() {
            var phone = $("#phone").val();
            var code = $('#code').val();
            if (!phone) {
                $.alert("请输入手机号");
                return;
            }
            var reg = /(1[3-9]\d{9}$)/;
            if (!reg.test(phone)) {
                $.alert("请输入正确格式手机号");
                return;
            }
            if (phone == userphone) {
                $.alert("与绑定中的手机号一致，不需重新绑定");
                return;
            }
            if (!code) {
                $.alert("请输入验证码");
                return;
            }
            console.log(num);
            if (num == 1) {
                $.alert("请不要重复提交");
                return;
            }
            num = 1;
            $.ajax({
                type: "get",
                url: "https://mp.jianguoes.com/api/mp/bindMobile",
                data: {
                    mobile: phone,
                    verificationCode: code
                },
                headers:{ token: $.cookie('code')},
                success: function(data) {
                    console.log(data)
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        num = 0;
                        return;
                    } 
                    window.location.reload()
                },
                error: function() {
                    num = 0;
                },
            })
        }

        //发送验证码
        function getcode(obj) {
            var phone = $("#phone").val();
            if (!phone) {
                $.alert("请填写手机号");
                return;
            }
            var reg = /(1[3-9]\d{9}$)/;
            if (!reg.test(phone)) {
                $.alert("请输入正确格式手机号");
                return;
            }
            if (phone == userphone) {
                $.alert("与绑定中的手机号一致，不需重新绑定");
                return;
            }
            $(obj).attr('onclick', '');
            //获取验证码
            $.ajax({
                type: "get",
                url: "https://mp.jianguoes.com/api/mp/smsCode",
                data: {
                    mobile: phone
                },
                headers:{ token: $.cookie('code')},
                success: function(data) {
                    if (data.errno != 0) {
                        $.alert(data.errmsg);
                        $(obj).text('获取验证码').attr('onclick', 'getcode(this)')
                    } else {
                        //$.toast(data.msg, "text");
                        const countDown = setInterval(() => {
                            if (count === 0) {
                                $(obj).text('重新获取').attr('onclick', 'getcode(this)')
                                clearInterval(countDown);
                                count = 120;
                            } else {
                                $(obj).text('重新获取(' + count + ')').attr('onclick', '')
                            }
                            count--;
                        }, 1000);
                    }
                },
                error: function() {
                    $(obj).text('获取验证码').attr('onclick', 'getcode(this)')
                },
            })
        }
    </script>
</body>

</html>